import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, TitleComponent, LegendComponent } from 'echarts/components';
import { SVGRenderer, SvgChart } from '@wuba/react-native-echarts';
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window')

echarts.use([SVGRenderer, GridComponent, TooltipComponent, TitleComponent, PieChart, LegendComponent]);

export default function Pie(props) {
    const skiaRef = useRef(null);
    useEffect(() => {
        const option = {
            title: {
                text: props.title || '',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 900
                }
            },
            tooltip: {
                trigger: "item",
            },
            grid: {
                bottom: 0
            },
            legend: {
                orient: 'vertical',
                bottom: "5%",
                // left: "center",
                x: 'left',
            },
            color: [
                "#7961F9",
                "#FF9F43",
                "#EA5455",
                "#73c0de",
                "#3ba272",
                "#fc8452",
                "#9a60b4",
                "#ea7ccc",
            ],
            grid: {
                bottom: 0
            },
            series: [
                {
                    name: "Access From",
                    type: "pie",
                    radius: ["40%", "70%"],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: "#fff",
                        borderWidth: 2,
                    },
                    label: {
                        show: false,
                        position: "center",
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 30,
                            fontWeight: "bold",
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    data: props.series,
                },
            ],
        };
        let chart;
        if (skiaRef.current) {
            chart = echarts.init(skiaRef.current, 'light', {
                renderer: 'svg',
                width: width - 34,
                height: width,
            });
            chart.setOption(option);
        }
        return () => chart?.dispose();
    }, []);

    // return <SkiaChart ref={skiaRef} />;
    return <SvgChart ref={skiaRef} />;
}